import React from 'react';
import { Modal, Input, Form, Select, message } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';

const Option = Select.Option;

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

// 两种不同类型的替换
const text = {
  create: {
    button: '新建',
    success: '新建成功',
    namespace: 'warehouseLoc/create',
    title: '新建库位',
  },
  edit: {
    button: '更新',
    success: '更新成功',
    namespace: 'warehouseLoc/edit',
    title: '更新库位',
  },
};

const modal = ({
  type = 'create',
  data = {},
  visible = false,
  form,
  onFinish = () => null,
  warehouseLoc,
  loading,
  dispatch,
}) => {
  const {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  } = form;

  const handleOK = () => {
    validateFields((err) => {
      if (!err) {
        const value = getFieldsValue();
        dispatch({
          type: text[type].namespace,
          payload: {
            query: _.merge(data, value),
            onEnd: (error) => {
              if (error) {
                return message.error(error);
              }
              message.success(text[type].success);
              onFinish();
            },
          },
        });
      }
    });
  };

  const { warehouses, defaultWid, areas } = warehouseLoc;

  return (
    <Modal
      visible={visible}
      okText={text[type].button}
      onOk={handleOK}
      onCancel={onFinish}
      title={text[type].title}
      confirmLoading={loading.effects[text[type].namespace]}
      cancelText="取消"
    >
      <Form
        layout="horizontal"
      >
        <FormItem label="仓库" hasFeedback {...formItemLayout}>
          {getFieldDecorator('wid', {
            initialValue: data.wid || defaultWid,
            rules: [
              {
                required: true,
              },
            ],
          })(
            <Select
              style={{ width: '100%' }}
              placeholder="选择一个仓库"
              disabled
            >
              {
              warehouses.map((item) => {
                return (
                  <Option value={item.wid}>{item.name}</Option>
                );
              })
            }
            </Select>,
          )}
        </FormItem>
        <FormItem label="库区" hasFeedback {...formItemLayout}>
          {getFieldDecorator('area', {
            initialValue: data.area,
            rules: [
              {
                required: true,
                message: '库区不能为空',
              },
            ],
          })(
            <Select
              style={{ width: '100%' }}
              placeholder="选择一个库区"
            >
              {
              (areas[defaultWid] || []).map((item) => {
                return (
                  <Option value={item}>{item}</Option>
                );
              })
            }
            </Select>,
          )}
        </FormItem>
        <FormItem label="楼层" hasFeedback {...formItemLayout}>
          {getFieldDecorator('floor', {
            initialValue: data.floor,
            rules: [
              {
                required: true,
                message: '楼层不能为空',
              },
            ],
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="排" hasFeedback {...formItemLayout}>
          {getFieldDecorator('therow', {
            initialValue: data.therow,
            rules: [
              {
                required: true,
                message: '排不能为空',
              },
            ],
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="列" hasFeedback {...formItemLayout}>
          {getFieldDecorator('thecolumn', {
            initialValue: data.therow,
            rules: [
              {
                required: true,
                message: '列不能为空',
              },
            ],
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="库位名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('thename', {
            initialValue: data.thename,
            rules: [
              {
                required: true,
                message: '库位名称不能为空',
              },
            ],
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="库位码" hasFeedback {...formItemLayout}>
          {getFieldDecorator('thecode', {
            initialValue: data.thecode,
            rules: [
              {
                required: true,
                message: '库位码不能为空',
              },
            ],
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="公司名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('company', {
            initialValue: data.company,
          })(<Input maxLength={20} />)}
        </FormItem>
        <FormItem label="状态" hasFeedback {...formItemLayout}>
          {getFieldDecorator('thestatus', {
            initialValue: data.thestatus,
            rules: [
              {
                required: true,
                message: '状态不能为空',
              },
            ],
          })(
            <Select
              style={{ width: '100%' }}
              placeholder="选择一个状态"
            >
              {
              (['无效', '有效']).map((item, index) => {
                return (
                  <Option value={index}>{item}</Option>
                );
              })
            }
            </Select>,
          )}
        </FormItem>
        <FormItem label="备注" hasFeedback {...formItemLayout}>
          {getFieldDecorator('remark', {
            initialValue: data.remark,
          })(<Input maxLength={40} />)}
        </FormItem>
      </Form>
    </Modal>
  );
};

export default connect(state => state)(Form.create()(modal));
